// //给外接js文件添加jquery语法提示
// require('jQuery')

//jq入口函数 : 等待页面dom树加载完毕后执行
$(function () {
  //1.故障设备tab栏切换
  $('.monitor .tabs a').on('click', function () {
    //1.1 自己排他
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
    //1.2 底部content排他
    $('.monitor .content')
      .eq($(this).index())
      .show()
      .siblings('.content')
      .hide()
  })

  //2.故障设备无限滚动
  /* (1)注意点： 元素移动前提要有定位属性，所以要给carousel添加定位
       (2)滚动距离 = 轮播图carousel高度 - 轮播窗口carousel-view高度
       (3)使用函数递归实现无限滚动
    */
  $('.carousel').css('position', 'relative')

  function wuxian () {
    $('.carousel').animate({ top: -175 }, 5000, 'linear', function () {
      //定位改成0
      $('.carousel').css('top', 0)
      //递归函数：继续调用自己
      wuxian()
    })
  }

  //函数声明不会执行，需要调用才会执行
  wuxian()

  //3.订单tab栏
  //数据数组
  let orderData = [
    { orders: '20,301,987', amount: '99834' },
    { orders: '301,987', amount: '9834' },
    { orders: '1,987', amount: '3834' },
    { orders: '987', amount: '834' }
  ]

  $('.order .filter a').on('click', function () {
    //1.排他思想修改样式
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
    //2.底部显示对应数据
    $('.order .data h4:eq(0)').text(orderData[$(this).index()].orders)
    $('.order .data h4:eq(1)').text(orderData[$(this).index()].amount)
  })

  //4.销售额tab栏切换
  $('.sale .filter a').on('click', function () {
    //1.排他思想修改样式
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
    //2.点击修改图标数据
    /*动态修改图标数据核心原理： 更换data 
    1. 使用匿名函数自调用来加载图表，此时图表是一个局部变量
      * 解决方案：将echarts对象添加给window的属性。 可以在任何地方使用，而且可以省略window(达到全局变量效果)
    2.动态修改option.series[0].data
    3.一定要重新调用setOption才可以刷新数据
    */

    //二维数组
    let data = [
      [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    ]
    console.log(data)
    //修改图标数据
    lineOption.series[0].data = data[ $(this).index() ][0]
    lineOption.series[1].data = data[ $(this).index() ][1]
    //修改数据之后，必须要重新渲染一次新的数据
    lineEcharts.setOption(lineOption)
    
  })

  //无限切换图表数据
  let i = 2//默认月
  setInterval(function(){
    i == $('.sale .filter a').length-1 ? i = 0 : i++
    $('.sale .filter a').eq(i).click()
  },2000)

  //5.全国热榜移入移出效果
  let hotData = [
    { name: '可爱多', num: '9,086' },
    { name: '娃哈哈', num: '8,341' },
    { name: '喜之郎', num: '7,407' },
    { name: '八喜', num: '6,080' },
    { name: '小洋人', num: '6,724' },
    { name: '好多鱼', num: '2,170' }
  ]

  $('.hot .ul-left>li').on('mouseenter', function () {
    //1.排他思想修改样式
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active')
    //2.切换右侧ul数据 ： 把数组顺序打乱,把最后元素移动到最前面
    hotData.unshift(hotData.pop())
    //先清除现有的数据
    $('.hot .ul-right').empty()
    //然后遍历数组添加数据
    for (let i = 0; i < hotData.length; i++) {
      $('.hot .ul-right').append(`<li>
        <span>${hotData[i].name}</span>
        <span>${hotData[i].num} <i class="icon-up" style="color:#dc3c33"></i></span>
        </li>`)
    }
  })
})
